<template>
<div>
   <div class="search">
       <input type="text" v-model="keyword" class="search-input" placeholder="输入城市名或拼音">
   </div> 
   <div class="search-content" ref="search" v-show="keyword">
       <ul>
           <li class="search-item border-bottom" v-for="item of list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
           <li class="search-item border-bottom" v-show="hasNoData">没找到匹配数据</li>
       </ul>
   </div>
</div>
</template>
<script>
import Bscroll from 'better-scroll' 
export default {
   name:'CitySearch',
   props:{
       cities:Object
   },
   data () {
       return {
           keyword:'',
           list:[],
           timer:null
       }
   },
   methods:{
       handleCityClick (city) {
           this.$store.commit('changeCity',city) //触发/store/index.js下面的actions方法,dispatch是要根据actions转发的,使用commit就不需要action转发了
           this.$router.push('/')   //页面跳转
       }
   },
   computed:{
       hasNoData () {
           return !this.list.length
       }
   },
   watch:{
       keyword () {
           if(this.timer){
               clearTimeout(this.timer)
           }
           if(!this.keyword){
               this.list = []
               return 
           }
           this.timer=setTimeout(()=>{
               const result = []
               for(let i in this.cities){
                   this.cities[i].forEach((value)=>{
                       if(value.spell.includes(this.keyword) || value.name.indexOf(this.keyword) > -1){
                           result.push(value)
                       }
                   })
               }
               this.list = result
           },100)
       }
   },
   mounted () {
       this.scroll = new Bscroll(this.$refs.search)
   }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
    height :.72rem
    padding:.1rem
    background:$bgColor
    .search-input
        width:100%
        height :.62rem
        line-height :.62rem
        text-align:center
        border-radius:.06rem
        color:#666
        box-sizing:border-box
        padding:0 .1rem
.search-content
    z-index :1
    overflow:hidden
    position:absolute
    top:1.78rem
    left:0
    right:0
    bottom:0
    background: #eee
    .search-item
        line-height: .62rem
        padding-left: .2rem
        background:#fff
        color: #666
</style>